<template>
<!-- <div>这是预警历史查询</div> -->
<div class="block">
    <div class="header">
        <el-date-picker v-model="starttime" default-value type="date" size="small" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="开始日期">
        </el-date-picker>
        <el-date-picker v-model="endtime" default-value type="date" size="small" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" size="small">确定</el-button>
    </div>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
            <el-tab-pane label="未处理" name="first" style="min-height:400px;">
                未处理:
            </el-tab-pane>
            <el-tab-pane label="全部" name="second" style="min-height:400px;">
                <el-table :data="reasonData" border style="width: 100%;margin-top:15px;">
                    <el-table-column prop="warningTime" label="预警时间" width="180">
                    </el-table-column>
                    <el-table-column prop="warningContent" label="预警内容" width="180">
                    </el-table-column>
                    <el-table-column prop="processingTime" label="处理时间">
                    </el-table-column>
                    <el-table-column prop="processingPerson" label="处理人">
                    </el-table-column>
                    <el-table-column prop="processingResult" label="处理结果">
                        <template slot-scope="scope">
                            <el-select v-model="processingResult" size="small" filterable clearable placeholder="选择处理结果">
                                <el-option v-for="item in processingResultOptions" :key="item.dataType" :label="item.typeName" :value="item.dataType">
                                </el-option>
                            </el-select>
                            <el-button type="text" style="float:right;position:relative;right:10%;" @click.native.prevent="" size="small">
                                修改
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注补充" width="220">
                        <template slot-scope="scope">
                            <el-input width="220" placeholder="点击输入补充说明"></el-input>
                            <div style="position:relative;left: 30%;">
                                <el-button @click.native.prevent="" type="text" size="small">
                                    保存
                                </el-button>
                                <el-button @click.native.prevent="" type="text" size="small">
                                    修改
                                </el-button>
                            </div>

                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination id="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30]" :pagem-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
</div>
</template>

<script>
export default {
    data() {
        let showDate = new Date();
        let seperator = '-';
        let year = showDate.getFullYear();
        let month = showDate.getMonth() + 1;
        let day = showDate.getDate();
        var strDate = showDate.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        let currentdate = year + seperator + month + seperator + strDate;
        return {
            starttime: currentdate,
            endtime: '',
            activeName: 'first',
            currentPage: 1,
            pageSize: 10,
            total: 0,
            reasonData: [{
                warningTime: '2018-12-25 10:00',
                warningContent: '这是一条预警内容',
                processingTime: '2018-12-25 10:00',
                processingPerson: '蒋葳',
                processingResult: '已解决',
            }],
            //处理结果
            processingResultOptions: [],
            processingResult: '',
        }
    },
    methods: {
        handleClick(tab, event) {
            // console.log(tab, event);
        },
        handleSizeChange(pageSize) {

        },
        handleCurrentChange(currentPage) {

        },
    },
}
</script>

<style scoped>

</style>
